<template>
  <view>
    <u-navbar :is-back="false" title="首页" :is-fixed="true" title-color="#000" :border-bottom="false">
      <view class="slot-wrap">
        <view class="navbar-right">
          <view class="message-box right-item" @click="jump('pages/user/news')">
            <u-badge :is-dot="true" type="error" is-center :count="unReadNumber"></u-badge>
            <u-icon name="chat" size="40"></u-icon>
          </view>
        </view>
      </view>
    </u-navbar>
    <view class="content">
      <view class="swipper_wrp">
        <u-swiper :list="carousels" :height="400" name="imageUrl" :border-radius="0" @click="swiperJump"></u-swiper>
      </view>
      <view class="nav_wrp u-flex-wrap">
        <navigator url="/pages/curriculum/index" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_1.png" class="icon_img"></image>
          </view>
          <view class="txt">家长课程</view>
        </navigator>
        <navigator url="/pages/explore/job" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_2.png" class="icon_img"></image>
          </view>
          <view class="txt">职业探索</view>
        </navigator>
        <navigator url="/pages/explore/zhuanye" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_3.png" class="icon_img"></image>
          </view>
          <view class="txt">专业百科</view>
        </navigator>
        <navigator url="/pages/explore/school" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_4.png" class="icon_img"></image>
          </view>
          <view class="txt">院校一览</view>
        </navigator>
        <navigator url="/pages/explore/xuanke" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_5.png" class="icon_img"></image>
          </view>
          <view class="txt">选科要求</view>
        </navigator>
        <navigator url="/pages/explore/fill_in" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_6.png" class="icon_img"></image>
          </view>
          <view class="txt">模拟填报</view>
        </navigator>
        <navigator url="/pages/explore/school?type=1" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_7.png" class="icon_img"></image>
          </view>
          <view class="txt">分数线</view>
        </navigator>
        <navigator url="/pages/batch/index" class="item_nav">
          <view class="icon">
            <image src="https://app.zbzedu.com/static/WaChat/img/dh_8.png" class="icon_img"></image>
          </view>
          <view class="txt">批次线</view>
        </navigator>
      </view>
      <navigator url="/pages/index/record_detail" class="descrition u-m-b-20">
        <img :src="evaluationIntroduction.cover" class="descrition_img">
      </navigator>
      <view class="ad u-flex flex-between">
        <navigator :url="getLinkUrl(activity[0].forwardsPage, 0).url"
                   :open-type="getLinkUrl(activity[0].forwardsPage, 0).type"
                   class="l" v-if="activity.length && activity[0] &&  activity[0].titlePage">
          <img :src="activity && activity[0].titlePage">
        </navigator>
        <view class="r flex-between u-flex-col"
              v-if="activity && (activity[1] || activity[2] ) && (activity[1].titlePage || activity[2].titlePage)">
          <navigator :url="getLinkUrl(activity[1].forwardsPage, 1).url"
                :open-type="getLinkUrl(activity[1].forwardsPage, 1).type"
                class="r-t" v-if="activity.length && activity[1] &&  activity[1].titlePage">
            <img :src="activity[1] && activity[1].titlePage">
          </navigator>
          <navigator class="r-b"
                :url="getLinkUrl(activity[2].forwardsPage, 2).url"
                :open-type="getLinkUrl(activity[2].forwardsPage, 2).type"
                v-if="activity.length && activity[2] && activity[2].titlePage">
            <img :src="activity[2] && activity[2].titlePage">
          </navigator>
        </view>
      </view>
      <view class="home_record record_list" v-if="videoClass.length">
        <view class="u-p-b-30 u-flex flex-between">
          <view class="font-b font-36" style="color: #363637">推荐视频</view>
          <navigator url="/pages/curriculum/index" class="u-p-r-20 u-font-xs color-999">
            更多
            <u-icon name="arrow-right" size="20" color="#999"></u-icon>
          </navigator>
        </view>
        <view class="list_wrapper">
          <view class="item_list" v-for="(item, index) in videoClass"
                :key="index"
                @click="jump(`pages/curriculum/detail?id=${item.id}`)">
            <view class="left" style="margin-right: 40upx;width: 300rpx">
              <image class="item_img" :src="item.titlePage"></image>
              <!--<u-image width="100%" height="180rpx" :src=""></u-image>-->
            </view>
            <view class="right" style="margin-right: 0">
              <view class="item_title eclipse-1 u-p-t-20">{{ item.videoTitle }}</view>
              <view class="item_content u-p-t-20">
                {{ item.speaker }} <text class="u-p-l-20">{{item.speakerIntroduction}}</text>
              </view>
              <view class="item_date u-p-t-20">
                <u-icon name="eye" size="28" color="#999"></u-icon>
                <text class="u-p-l-10">{{item.lookNum}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="home_record record_list" v-if="news.length">
        <view class="u-p-b-30 u-flex flex-between">
          <view class="font-b font-36" style="color: #363637">使用案例/热点资讯</view>
          <navigator url="/pages/index/news_list" class="u-p-r-20 u-font-xs color-999">
            更多
            <u-icon name="arrow-right" size="20" color="#999"></u-icon>
          </navigator>
        </view>
        <view class="list_wrapper">
          <view class="item_list" v-for="(item, index) in news"
                v-if="index < 3"
                :key="index"
                @click="jump(`pages/index/news_detail?id=${item.id}`)">
            <view class="right">
              <view class="item_title eclipse-1">{{ item.newsName }}</view>
              <view class="item_content">{{ item.newsDesc }}</view>
              <view class="item_date u-flex flex-between">
                <view>{{ item.createTime }}</view>
                <view>
                  <u-icon name="eye" size="28" color="#999"></u-icon>
                  <text class="u-p-l-10">{{item.lookNum}}</text>
                </view>
              </view>
            </view>
            <view class="left">
              <image class="item_img" :src="item.newsCover"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {request} from "../../util/api";
	import mixins from "./mixins";
	import {SWIPER_JUMP} from "../../util/util";

	export default {
		mixins: [mixins],
    data() {
      return {
        unReadNumber: 0
      }
    },

    onShow() {
		  this.getLogin()
      this.getData()
    },

    methods: {
		  getLinkUrl(path, index) {
		    let ret_url = {}
		    switch (path) {
          case '测评页面':
            ret_url.url = '/pages/pince/index'
            ret_url.type = 'switchTab'
            break;
          case '产品详情':
            ret_url.url = '/pages/index/product_detail?index=' + index
            ret_url.type = 'navigateTo'
            break
        }
        return ret_url
      },
			swiperJump(res) {
				SWIPER_JUMP(this.carousels[res].linkUrl)
			},

      getLogin: function() {
        var user = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user');
        if (user && user.token) {
          this.getUnReadNumber();
        }
      },

      getUnReadNumber() {
        request({
		      url: '/app/userCenter/getUnReadNumber'
	      }).then(ret => {
	      	this.unReadNumber = '';
          if (ret.data) {
            this.unReadNumber = ret.data;
          }
        })
      },

      getData() {
			  /*request({
          url: '/system/wx/get/allXzqh',
          token: true
        }).then(res => {
          console.log(res)
        })*/
      }
		},

		onShareAppMessage(res) {}
  }
</script>

<style lang="scss">
	.record_list {
		.item_list {
			display: flex;
			padding-bottom: 30upx;
			margin-bottom: 30upx;
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
      }
			.left {
				width: 250upx;
				height: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.item_img {
					width: 100%;
					height: 180upx;
					border-radius: 16upx;
				}
			}
			.right {
				flex: 1;
				margin-right: 40upx;
				width: 400upx;
				.item_title {
					color: #333;
					font-size: 28upx;
          padding-top: 10upx;
				}
				.item_content {
					color: #666;
					font-size: 26upx;
					margin-top: 10upx;
				}
				.item_date {
					color: #999;
					font-size: 22upx;
					margin-top: 10upx;
				}
			}
		}
	}
	.home_record {
    width: 96%;
		padding: 26rpx 0;
    margin: 0 auto;
		.record_img {
			width: 100%;
			height: 300rpx;
			border-radius: 16upx;
		}
		.title {
			padding: 20upx 0;
			font-size: 32upx;
			font-weight: bold;
			color: #333;
		}
		.content {
			font-size: 26upx;
			color: #666;
		}
		.btn {
			width: 150rpx;
			margin: 0 auto;
			margin-top: 20rpx;
		}
	}
	.nav_wrp {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
    padding-top: 5upx;
		.item_nav {
			width: 21%;
      margin-top: 15upx;
			.icon {
				display: flex;
				align-items: center;
				justify-content: center;
				.icon_img {
					width: 100rpx;
					height: 100rpx;
				}
			}
			.txt {
				display: flex;
				align-items: center;
				justify-content: center;
        color: rgba(16, 16, 16, 100);
        font-size: 24upx;
			}
		}
	}
  .descrition {
    width: 100%;
    height: 200upx;
    position: relative;
    .descrition_img {
      width: 100%;
      height: 200upx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .btns_wrp {
      align-items: center;
      height: 100%;
      .item_btns {
        background: rgba(247,247,247,.4);
      }
    }
  }
  .ad {
    width: 98%;
    height: 400upx;
    margin: 0 auto;
    margin-bottom: 20upx;
    .l {
      flex: 1;
      height: 100%;

    }
    .r {
      flex: 1;
      height: 100%;
      margin-left: 10upx;
      .r-t {
        height: 48.5%;
      }
      .r-b {
        height: 48.5%;
      }
    }
    image {
      width: 100%;
      height: 100%;
      border-radius: 16upx;
    }
  }
  .navbar-right {
    margin-right: 24rpx;
    display: flex;
  }
  .right-item {
    margin: 0 20rpx;
    position: relative;
    display: flex;
  }
</style>
